<template>
  <div>
    <p-modal
      title="新增人员需求"
      :visible="visible"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <p-form-model
        ref="ruleForm"
        :model="form"
        :rules="rules"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <p-form-model-item
          ref="skillExplain"
          label="技能要求描述 "
          prop="skillExplain"
        >
          <p-input v-model="form.skillExplain" />
        </p-form-model-item>

        <p-form-model-item
          ref="needMembers"
          label="需求人数"
          prop="needMembers"
        >
          <p-input v-model="form.needMembers" />
        </p-form-model-item>
        <p-form-model-item
          ref="lendStartTime"
          label="借调开始时间"
          prop="lendStartTime"
        >
          <p-date-picker
            v-model="form.lendStartTime"
            format="YYYY-MM-DD"
            valueFormat="YYYY-MM-DD"
          />

        </p-form-model-item>

        <p-form-model-item
          ref="lendEndTime"
          label="借调结束时间"
          prop="lendEndTime"
        >

          <p-date-picker
            v-model="form.lendEndTime"
            format="YYYY-MM-DD"
            valueFormat="YYYY-MM-DD"
          />

        </p-form-model-item>

        <p-form-model-item ref="remark" label="备注" prop="remark">
          <p-input v-model="form.remark" />
        </p-form-model-item>
      </p-form-model>
    </p-modal>
  </div>
</template>
<script>
import { postAction, getAction, putAction, deleteAction } from "@/api/manage";

export default {
  data() {
    return {
      visible: false,
      confirmLoading: false,
      labelCol: { span: 8 },
      wrapperCol: { span: 12 },
      state: "add",
      form: {
        skillExplain: "",
        needMembers: "",
        remark: "",
        lendStartTime: "",
        lendEndTime: "",
      },
      rules: {
        skillExplain: [
          { required: true, message: "请输入技能要求描述", trigger: "blur" },
        ],
        needMembers: [
          { required: true, message: "请输入需求人数", trigger: "blur" },
        ],
        lendStartTime: [
          { required: true, message: "请输入借调开始时间", trigger: "blur" },
        ],
        lendEndTime: [
          { required: true, message: "请输入借调结束时间", trigger: "blur" },
        ],
      },
      proLineList: [],
      url: {
        add: "/mes-manpower/mesHrTotalRule",
        edit: "/mes-manpower/mesHrWorktimeDeclare",
      },
    };
  },
  mounted() {},
  methods: {
    showModal() {
      this.visible = true;
    },
    handleOk(e) {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          console.log(this.form);
          
          this.$emit("handleSuccess", { ...this.form})
          this.handleCancel()
        }
      });
    },
    handleCancel(e) {
      this.visible = false;
      Object.assign(this.form, this.$options.data().form);
      this.$refs.ruleForm.resetFields()
    },
  },
};
</script>
